<template>
    <div><input type="text" v-model="num1"/>+<input type="text" v-model="num2"/>={{num3}}
        <div>用watch计算：{{num3}}</div>
        <div>用compute计算：{{num4}}</div>
        <div>用compute计算：{{num5}}</div>
    </div>
</template>

<script>
    export default {
        name: "compute",
        data() {
            return {
                num1: null,
                num2: null,
                num3: null
            }
        }, methods: {
            add: function () {
                this.num3 = Number(this.num1) + Number(this.num2)
            }
        },
        computed: {
            'num4': function () {
                //num4是定义的变量,只要data中数据发生了变化就会重新计算属性值
                return Number(this.num1) + Number(this.num2);
            },
            'num5': function () {
                return this.num1 + this.num4;
            }
        },
        created: function () {
            this.num1 = 101;
            console.log(`开始加载组件${this.num1}`);
        },
        watch: {
            'num1': function () {
                this.add();
            },
            'num2': function () {
                this.add();
            }
        }
    }
</script>

<style scoped>

</style>
